<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="策略匹配明细" name="first">
        <el-card shadow="never" class="d2-mb">
          <el-form ref="first_form" :model="first_form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="匹配ID:">
                  <el-input v-model="first_form.match_id" />
                </el-form-item>
                <!-- <el-form-item label="策略名称:">
                <el-input v-model="first_form.strategy_name" />
              </el-form-item> -->
              </el-col>
              <el-col :span="6">
                <el-form-item label="匹配名称:">
                  <el-input v-model="first_form.match_name" />
                </el-form-item>
                <!-- <el-form-item label="创建人:">
                <el-select v-model="first_form.creator" placeholder="请选择" style="width:100%">
                  <el-option
                    v-for="item in select_datas_first"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item> -->
              </el-col>
              <el-col :span="6">
                <el-form-item label="策略ID:">
                  <el-input v-model="first_form.strategy_id" />
                </el-form-item>
                <!-- <el-form-item label="创建日期:">
                <el-date-picker
                  type="date"
                  v-model="first_form.create_date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item> -->
              </el-col>
              <el-col :span="6">
                <el-form-item label="策略名称:">
                  <el-input v-model="first_form.strategy_name" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建人:">
                  <el-select v-model="first_form.creator" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in select_datas_first" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建日期:">
                  <el-date-picker type="date" v-model="first_form.create_date" placeholder="选择日期"
                    value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="margin-top:3px;">
                <el-button size="small" @click="first_select_fn()">查询</el-button>

              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button size="small">导出</el-button>
          <el-button size="small" @click="$router.push('/print_page')">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">策略匹配明细</p>
          </template>
          <el-table border :data="first_tableData" :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center' }" style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column prop="match_id" label="匹配ID"></el-table-column>
            <el-table-column prop="match_type" label="匹配种类"></el-table-column>
            <el-table-column prop="match_name" label="匹配名称"></el-table-column>
            <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
            <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
            <el-table-column prop="creator_name" label="创建人"></el-table-column>
            <el-table-column prop="create_date" label="创建日期" sortable width="115"></el-table-column>
            <el-table-column label="现货信息">
              <el-table-column prop="commodity_name" label="品名"></el-table-column>
              <el-table-column prop="exposure_no" label="敞口号"></el-table-column>
              <el-table-column prop="directionS" label="方向"></el-table-column>
              <el-table-column prop="match_amount" label="匹配数量"></el-table-column>
              <el-table-column prop="commodity_unitS" label="单位"></el-table-column>
              <el-table-column prop="priceS" label="价格"></el-table-column>
              <el-table-column prop="currencyS" label="币种"></el-table-column>
            </el-table-column>
            <el-table-column label="衍生品信息">
              <el-table-column prop="productName" label="品名"></el-table-column>
              <el-table-column prop="tradeID" label="成交ID"></el-table-column>
              <el-table-column prop="instrumentID" label="合约"></el-table-column>
              <el-table-column prop="direction" label="方向"></el-table-column>
              <el-table-column prop="offsetFlag" label="开平"></el-table-column>
              <el-table-column prop="match_volume" label="匹配手数"></el-table-column>
              <el-table-column prop="commodity_unit" label="单位"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column prop="currency" label="币种"></el-table-column>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @current-change="handleCurrentChange_first" :current-page="first_form.page"
              :page-size="first_form.pageSize" layout="total, prev, pager, next, jumper" :total="first_form.pageTotal">
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="期权匹配明细" name="second">
        <el-card shadow="never" class="d2-mb">
          <el-form ref="second_form" :model="second_form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="匹配ID:">
                  <el-input v-model="second_form.match_id" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="匹配名称:">
                  <el-input v-model="second_form.match_name" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="策略ID:">
                  <el-input v-model="second_form.strategy_id" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="策略名称:">
                  <el-input v-model="second_form.strategy_name" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建人:">
                  <!-- <el-input v-model="second_form.creator" /> -->
                  <el-select v-model="second_form.creator" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in select_datas_second" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建日期:">
                  <el-date-picker type="date" v-model="second_form.create_date" placeholder="选择日期"
                    value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top:3px;">
                <el-button size="small" @click="second_select_fn()">查询</el-button>

              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">期权匹配明细表</p>
          </template>
          <el-table border :data="second_tableData" :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{ background: '#eef1f6','text-align': 'center' }" style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column prop="match_id" label="匹配ID"></el-table-column>
            <el-table-column prop="match_name" label="匹配名称"></el-table-column>
            <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
            <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
            <el-table-column prop="creator_name" label="创建人"></el-table-column>
            <el-table-column prop="create_date" label="创建日期"  sortable width="115"></el-table-column>
            <!-- <el-table-column prop="tradeID" label="客户号"> </el-table-column> -->
            <el-table-column prop="tradeID" label="成交序号"> </el-table-column>
            <el-table-column prop="productName" label="品种"> </el-table-column>
            <el-table-column prop="instrumentID" label="合约"> </el-table-column>
            <el-table-column prop="direction" label="方向"> </el-table-column>
            <el-table-column prop="tradeDate" label="成交日期" sortable width="115"> </el-table-column>
            <!-- <el-table-column prop="name" label="持仓量"> </el-table-column> -->
            <el-table-column prop="match_volume" label="匹配手数">
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @current-change="handleCurrentChange_second" :current-page="second_form.page"
              :page-size="second_form.pageSize" layout="total, prev, pager, next, jumper"
              :total="second_form.pageTotal">
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="期货匹配明细" name="third">
         <el-card shadow="never" class="d2-mb">
        <el-form ref="third_form" :model="third_form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="匹配ID:">
                <el-input v-model="third_form.match_id" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="匹配名称:">
                <el-input v-model="third_form.match_name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="策略ID:">
                <el-input v-model="third_form.strategy_id" />
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="策略名称:">
                <el-input v-model="third_form.strategy_name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人:">
                <!-- <el-input v-model="third_form.creator" /> -->
                <el-select v-model="third_form.creator" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in select_datas_third" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期:">
                <el-date-picker type="date" v-model="third_form.create_date" placeholder="选择日期"
                  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-top:3px;">
              <el-button size="small" @click="third_select_fn()">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
         </el-card>
    <div class="mb">
        <el-button size="small">导出</el-button>
              <el-button size="small">打印</el-button>
               </div>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height: 66px">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">期货匹配明细表</p>
      </template>
        <el-table border :data="third_tableData" :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ background: '#eef1f6','text-align': 'center' }" style="width: 100%">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="match_id" label="匹配ID"></el-table-column>
          <el-table-column prop="match_name" label="匹配名称"></el-table-column>
          <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
          <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
          <el-table-column prop="creator_name" label="创建人"></el-table-column>
          <el-table-column prop="create_date" label="创建日期" sortable width="115"></el-table-column>
          <!-- <el-table-column prop="name" label="客户号"> </el-table-column> -->
          <el-table-column prop="tradeID" label="成交序号"> </el-table-column>
          <el-table-column prop="productName" label="品种"> </el-table-column>
          <el-table-column prop="instrumentID" label="合约"> </el-table-column>
          <el-table-column prop="direction" label="方向"> </el-table-column>
          <el-table-column prop="tradeDate" label="成交日期" sortable width="115"> </el-table-column>
          <!-- <el-table-column prop="tradeDate" label="持仓量"> </el-table-column> -->
          <el-table-column prop="match_volume" label="匹配手数">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @current-change="handleCurrentChange_third" :current-page="third_form.page"
            :page-size="third_form.pageSize" layout="total, prev, pager, next, jumper" :total="third_form.pageTotal">
          </el-pagination>
        </div>
         </el-card>
      </el-tab-pane>
      <el-tab-pane label="现货匹配明细" name="fourth">
        <el-card shadow="never" class="d2-mb">
        <el-form ref="fourth_form" :model="fourth_form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="匹配ID:">
                <el-input v-model="fourth_form.match_id" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="匹配名称:">
                <el-input v-model="fourth_form.match_name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="策略ID:">
                <el-input v-model="fourth_form.strategy_id" />
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="策略名称:">
                <el-input v-model="fourth_form.strategy_name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人:">
                <!-- <el-input v-model="fourth_form.creator" /> -->
                <el-select v-model="fourth_form.creator" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in select_datas_fourth" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期:">
                <el-date-picker type="date" v-model="fourth_form.create_date" placeholder="选择日期"
                  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-top:3px;">
              <el-button size="small" @click="fourth_select_fn()">查询</el-button>
             
            </el-col>
          </el-row>
        </el-form>
         </el-card>
    <div class="mb">
 <el-button size="small">导出</el-button>
              <el-button size="small">打印</el-button>
      </div>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height: 66px">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">现货匹配明细表</p>
      </template>
        <el-table border :data="fourth_tableData" :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ background: '#eef1f6','text-align': 'center' }" style="width: 100%">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="match_id" label="匹配ID"></el-table-column>
          <el-table-column prop="match_name" label="匹配名称"></el-table-column>
          <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
          <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
          <el-table-column prop="creator_name" label="创建人"></el-table-column>
          <el-table-column prop="create_date" label="创建日期" sortable width="115"></el-table-column>
          <el-table-column prop="exposure_no" label="敞口号"></el-table-column>
          <el-table-column prop="commodity_name" label="品名"></el-table-column>
          <el-table-column prop="directionS" label="方向"></el-table-column>
          <el-table-column prop="exp_vol" label="敞口数量"></el-table-column>
          <el-table-column prop="match_amount" label="匹配数量"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @current-change="handleCurrentChange_fourth" :current-page="fourth_form.page"
            :page-size="fourth_form.pageSize" layout="total, prev, pager, next, jumper" :total="fourth_form.pageTotal">
          </el-pagination>
        </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>
<script>
  import {
    getReport_match_info,
    getUsers
  } from "../../../api/url";
  export default {
    data() {
      return {
        activeName: "first",
        //第一块
        first_form: {
          type: "strategy",
          match_id: "",
          match_name: "",
          strategy_id: "",
          strategy_name: "",
          creator: "",
          create_date: "",
          page: 1,
          pageSize: 20,
          pageTotal: 0
        },
        select_datas_first: [],
        first_tableData: [],
        //第二块
        second_form: {
          type: "options",
          match_id: "",
          match_name: "",
          strategy_id: "",
          strategy_name: "",
          creator: "",
          create_date: "",
          page: 1,
          pageSize: 20,
          pageTotal: 0
        },
        select_datas_second: [],
        second_tableData: [],
        //第三块
        third_form: {
          type: "futures",
          match_id: "",
          match_name: "",
          strategy_id: "",
          strategy_name: "",
          creator: "",
          create_date: "",
          page: 1,
          pageSize: 20,
          pageTotal: 0
        },
        select_datas_third: [],
        third_tableData: [],
        //第四块
        fourth_form: {
          type: "spot",
          match_id: "",
          match_name: "",
          strategy_id: "",
          strategy_name: "",
          creator: "",
          create_date: "",
          page: 1,
          pageSize: 20,
          pageTotal: 0
        },
        select_datas_fourth: [],
        fourth_tableData: []
      };
    },
    created() {
      getUsers().then(res => {
        this.select_datas_first = res.result;
        this.select_datas_second = res.result;
        this.select_datas_third = res.result;
        this.select_datas_fourth = res.result;
      });
      this.first_select_data();
    },
    methods: {
      first_select_data() {
        getReport_match_info(this.first_form).then(res => {
          this.first_tableData = res.result.results;
          this.first_form.pageTotal = res.result.count;
        });
      },
      second_select_data() {
        getReport_match_info(this.second_form).then(res => {
          this.second_tableData = res.result.results;
          this.second_tableData.forEach(item => {
            if (item.direction == '0') {
              item.direction = '买入'
            } else {
              item.direction = '卖入'
            }
          })
          this.second_form.pageTotal = res.result.count;
        });
      },
      third_select_data() {
        getReport_match_info(this.third_form).then(res => {
          this.third_tableData = res.result.results;
          this.third_tableData.forEach(item => {
            if (item.direction == '0') {
              item.direction = '买入'
            } else {
              item.direction = '卖入'
            }
          })
          this.third_form.pageTotal = res.result.count;
        });
      },
      fourth_select_data() {
        getReport_match_info(this.fourth_form).then(res => {
          this.fourth_tableData = res.result.results;
          this.fourth_form.pageTotal = res.result.count;
        });
      },
      first_select_fn() {
        this.first_form.page = 1;
        this.first_select_data();
      },
      second_select_fn() {
        this.second_form.page = 1;
        this.second_select_data();
      },
      third_select_fn() {
        this.third_form.page = 1;
        this.third_select_data();
      },
      fourth_select_fn() {
        this.fourth_form.page = 1;
        this.fourth_select_data();
      },
      handleCurrentChange_first(val) {
        this.first_form.page = val;
        this.first_select_data();
      },
      handleCurrentChange_second(val) {
        this.second_form.page = val;
        this.second_select_data();
      },
      handleCurrentChange_third(val) {
        this.third_form.page = val;
        this.third_select_data();
      },
      handleCurrentChange_fourth(val) {
        this.fourth_form.page = val;
        this.fourth_select_data();
      },
      handleClick(tab, event) {
        if (tab.name == "second") {
          // this.first_select_fn();
          this.second_select_fn();
        } else if (tab.name == "third") {
          this.third_select_fn();
        } else if (tab.name == "fourth") {
          this.fourth_select_fn();
        } else if (tab.name == "first") {
          this.first_select_fn();
        }
      }
    }
  };

</script>
<style scoped>
  .el-pagination {
    text-align: center;
  }

</style>
